<template>
	<view class="container">
		<view class="tiao"></view>
		<view class="order">
			<view class="pic">
				<image src="https://community.chuangxiangdianli.com/images/me/avator.png" mode=""></image>
				<view class="num">共3件商品</view>
			</view>
			<view class="msg">
				<view class="state">已发货</view>
				<view class="name">配送商: <text>韵达快递</text></view>
				<view class="number">运单编号: <text>1233211234567</text></view>
				<view class="confirm">确认收货</view>
			</view>
		</view>
		<view class="tiao"></view>
		<view class="logistics">
			物流信息
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.tiao{
		height: 10rpx;
		width: 100%;
		background-color: rgba(239, 240, 247, 1);
	}
	.order{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0 30rpx;
		box-sizing: border-box;
		.pic{
			position: relative;
			height: 205rpx;
			width: 205rpx;
			&>image{
				display: block;
				height: 100%;
				width: 100%;
			}
			.num{
				position: absolute;
				left: 0;
				bottom: 0;
				height: 40rpx;
				width: 100%;
				background: rgba(0,0,0, .5);
				text-align: center;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
				z-index: 10;
			}
		}
		.msg{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #393939;
			.name{
				font-size: 22rpx;
			}
			.number{
				font-size: 22rpx;
			}
			.confirm{
				height: 60rpx;
				width: 172rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
